<template>
  <div id="zui-text"
       :style="{'fontSize':data.fontSize +'px','color':data.fontColor,'backgroundColor':data.backgroundColor,'text-align':data.align}">
    {{ data.content }}
  </div>
</template>

<script>
export default {
  name: "zui-text",
  props: {
    data: {
      required: false,
      type: Object,
      default: () => {
        return {
          content: "",
          fontSize: 12,
          fontColor: "#000000",
          backgroundColor: "#FFFFFF",
          align: "left"
        }
      }
    }
  }

}
</script>

<style scoped>
#zui-text {
  width: 100%;
  height: auto;
  /*自动换行*/
  word-wrap: break-word;
  overflow: hidden;
}
</style>
